<template>
  <div>
    <group>
      <cell value="007">
          <span slot="title">1、教练代码</span>
      </cell>
    </group>


    <group>
      <cell is-link :border-intent="false"
      :arrow-direction="showContent004 ? 'up' : 'down'"
      @click.native="showContent004 = !showContent004">
        <span slot="title">2、学习记录</span>
      </cell>
      <template>
        <form class="slide" :class="showContent004?'animate':''">
          <datetime
          placeholder="请选择日期"
          v-model="data"
          title="日期"
          ></datetime>
          <popup-radio title="时段" placeholder="请选择时段" :options="options3" v-model="option3">
            <p slot="popup-header" class="vux-1px-b demo3-slot">请选择</p>
          </popup-radio>
          <x-textarea :max="100" placeholder="请输入内容" title="内容" v-model="content" ></x-textarea>
          <div style="text-align: center; padding-bottom:15px;">
            <x-button action-type="button" type="primary" mini>提交</x-button>
          </div>
        </form>
      </template>
    </group>

    <group>
      <cell is-link :border-intent="false"
      :arrow-direction="showContent005 ? 'up' : 'down'"
      @click.native="showContent005 = !showContent005">
        <span slot="title">3、学习进程</span>
      </cell>
      <template>
        <div class="slide" :class="showContent005 ? 'animate':''">
          <checker v-model="demo5" default-item-class="demo5-item" selected-item-class="demo5-item-selected">
            <span class="subject">科目一：</span>
            <checker-item v-for="i in ['学习中', '已完成']" :key="i" :value="i">{{ i }}</checker-item>
          </checker>
          <checker v-model="demo5" default-item-class="demo5-item" selected-item-class="demo51-item-selected">
            <span class="subject">科目二：</span>
            <checker-item v-for="i in ['学习中', '已完成']" :key="i" :value="i">{{ i }}</checker-item>
          </checker>
          <checker v-model="demo5" default-item-class="demo5-item" selected-item-class="demo52-item-selected">
            <span class="subject">科目三：</span>
            <checker-item v-for="i in ['学习中', '已完成']" :key="i" :value="i">{{ i }}</checker-item>
          </checker>
          <checker v-model="demo5" default-item-class="demo5-item" selected-item-class="demo53-item-selected">
            <span class="subject">科目四：</span>
            <checker-item v-for="i in ['学习中', '已完成']" :key="i" :value="i">{{ i }}</checker-item>
          </checker>
        </div>
      </template>
    </group>

    <group>
      <cell>
        <span slot="title" class="third">4、已拿到驾照</span>
          <checker v-model="demo5" default-item-class="demo6-item" selected-item-class="demo6-item-selected">
            <checker-item v-for="i in ['确定']" :key="i" :value="i">{{ i }}</checker-item>
          </checker>
      </cell>
    </group>

    <group>
      <cell class="comment-block">
        <span slot="title">5、评价</span>
        <x-input class="weui-vcode score-input">
          <span slot="right" style="margin-right: 1em;">分</span>
          <x-button slot="right" type="primary" mini>提交</x-button>
        </x-input>
      </cell>
    </group>

  
  </div>
</template>


<script>
import { Cell, CellBox, Group, XTextarea, XInput, Datetime, PopupRadio, XButton, Checker, CheckerItem } from 'vux'

export default {
  components: {
    Group,
    Cell,
    CellBox,
    XTextarea,
    XInput,
    Datetime,
    PopupRadio,
    XButton,
    Checker, 
    CheckerItem
  },
  methods: {
    onClick () {
      console.log('on click')
    }
  },
  data () {
    return {
      data: null,
      showContent004: true,
      showContent005: true,
      options3: ['上午', '下午', '晚上'],
      option3: '',
      content: '',
      demo5: null
    }
  }
}
</script>

<style scoped lang="less">
.sub-item {
  color: #888;
}
.slide {
  padding: 0 20px;
  overflow: hidden;
  max-height: 0;
  transition: max-height .5s cubic-bezier(0, 1, 0, 1) -.1s;
}
.animate {
  max-height: 9999px;
  transition-timing-function: cubic-bezier(0.5, 0, 1, 0);
  transition-delay: 0s;
}
.demo3-slot {
  text-align: center;
  padding: 8px 0;
  color: #888;
}
.demo5-item {
  width: 100px;
  height: 26px;
  line-height: 26px;
  text-align: center;
  border-radius: 3px;
  border: 1px solid #ccc;
  background-color: #fff;
  margin-right: 6px;
  margin-bottom: 10px;
}
.demo5-item-selected {
  background: #ffffff url(../../assets/active.png) no-repeat right bottom;
  border-color: #ff4a00;
}
.demo51-item-selected {
  background: #ffffff url(../../assets/active.png) no-repeat right bottom;
  border-color: #ff4a00;
}
.demo52-item-selected {
  background: #ffffff url(../../assets/active.png) no-repeat right bottom;
  border-color: #ff4a00;
}
.demo53-item-selected {
  background: #ffffff url(../../assets/active.png) no-repeat right bottom;
  border-color: #ff4a00;
}
.demo6-item {
  width: 100px;
  height: 26px;
  line-height: 26px;
  text-align: center;
  border-radius: 3px;
  border: 1px solid #ccc;
  background-color: #fff;
  margin-right: 6px;
}
.demo6-item-selected {
  background: #ffffff url(../../assets/active.png) no-repeat right bottom;
  border-color: #ff4a00;
}
.subject {
  margin-right: 2em;
}
.score-input {
  padding: 0 !important;
}
.comment-block {
  /deep/ .weui-cell__ft {
    flex: 1;
  }
}
</style>